<template>
    <el-button type="primary" @click="openDialog">打开弹窗</el-button>
    <QilinDialog v-model:dialogConfig="dialogConfig" @handleClose="handleClose"
        @submitConfirm="console.log('点击确定按钮')"
    >
        <template v-slot:extra>
            <div>额外的内容，extra插槽~</div>
        </template>
        <QilinForm v-model:formConfig="formConfig" ref="formConfigRef"></QilinForm>
    </QilinDialog>
</template>

<script setup>
import {reactive,ref} from "vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
const formConfigRef = ref(null);


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const openDialog=()=>{
    dialogConfig.isShow = true;
    // setTimeout(()=>{
    //     formConfig.submitData.richtext1 = "222";
    // },2000);
};
const handleClose=()=>{
    formConfigRef.value.formResetFields();
    dialogConfig.isShow = false;
};

const dialogConfig=reactive({
    isShow:false,
    title:"Qilin弹窗",
    width:700
});
const formConfig=reactive({
    elFormConfig:{
        labelWidth:"100px",
        // labelSuffix:"：",
        border:true,
        borderColor:"red"
    },
    itemConfig:[
        {
            labelName:"人物介绍",
            dataName:"richtext",
            type:"wangEditor",
            wangEditorConfig:{
                editorConfig:{
                    placeholder:"请输入内容......"
                }
            },
            width:24
        },
        {
            labelName:"项目成就",
            dataName:"richtext1",
            type:"vueEditor",
            editifyConfig:{
                autoHeight:true,
                customStyle:"height:300px;"
            },
            width:24
        },
        {
            labelName:"个人成就",
            dataName:"richtext2",
            type:"kaitifytext",
            kaitifyConfig:{
                bubbleProps:{
                    zIndex:9999
                },
                menuPopoverProps:{ //菜单组件的浮层属性配置
                    zIndex:5000, //浮层的z-index层级，默认为10
                    arrow:true, //浮层是否显示三角形
                }
            },
            width:24,
            validate:[
                {
                    required:true,
                    message:"请输入个人成就",
                    trigger:"blur"
                }
            ]
        }
    ],
    submitData:{
        richtext:"",
        richtext1:"",
        richtext2:"额呃呃呃呃呃呃"
    }
});


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
</style>
